import React from 'react';
import { Table } from 'antd';
import SearchInput from 'pages/catalogue/right/input.jsx'
import CatalogueAction from 'pages/catalogue/actions/catalogueAction';

export default React.createClass({

  getInitialState() {
    return {
      dataSource:null
    };
  },
  componentDidMount() {
    let param = {};
    param.pageSize = 10;
    param.curPage = 1;
    CatalogueAction.getServicesList(param).then((data)=>{
      this.setState({
        servicesList:data,
        dataSource: data
      })
    })

  },
  onSearch(value) {
    if (value === '') {
      let dataSource = this.state.dataSource;
      this.setState({
        servicesList:dataSource
      })
      return;
    }
    let dataSource1 = [];
    let dataSource = this.state.dataSource;
    for (let i = 0;i < dataSource.length;i++) {
      if (dataSource[i].number.indexOf(value) >= 0 || dataSource[i].title.indexOf(value) >= 0) {
        dataSource1.push(dataSource[i])
      }
    }
    this.setState({
      servicesList:dataSource1
    })

  },
  render() {


    const columns = [{
      title: '受理编号',
      dataIndex: 'number',
      key: 'number',
    }, {
      title: '工单标题',
      dataIndex: 'title',
      key: 'title',
    }, {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
    }, {
      title: '提交时间',
      dataIndex: 'createTime',
      key: 'createTime',
    }];
    return (
            <div className="right-wrap">
                <span>查询和跟踪您的服务请求</span>
                <div>
                  <SearchInput placeholder="input search text"
                               onSearch={this.onSearch} style={{ width: 200 }}
                      />
                </div>
                <div>
                    <Table dataSource={ this.state.servicesList} columns={columns}/>
                </div>

            </div>
    );
  }
})
